<template>
  <div class="IntersectionObserve">
    <div>IntersectionObserve</div>
    <div class="over-box"></div>
    <div class="foot-box">
      <div class="box1">
        <div class="box2"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import "intersection-observer";
import { Vue, Component } from "vue-property-decorator";
@Component
export default class IntersectionObserve extends Vue {
  IntersectionObserverCallback(entries: any, observer: any) {
    //参数entries 为监听的所有元素组成的数组
    entries.forEach((item: any) => {
      console.log(item);
      console.log(item.target);
      // Each entry describes an intersection change for one observed target element:
      // entry.boundingClientRect
      // entry.intersectionRatio
      // entry.intersectionRect
      // entry.isIntersecting
      // entry.rootBounds
      // entry.target
      // entry.time
    });
  }
  mounted() {
    let _this = this;
    let IntersectionObserverOption = {
      root: null, //指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗。
      rootMargin: "0px",
      threshold: 1.0, //交叉阈值 为1时完全显示监听元素，也可为数组 每个交叉值都会触发一次回调函数
    };
    let io = new IntersectionObserver(
      _this.IntersectionObserverCallback,
      IntersectionObserverOption
    );
    io.observe(document.getElementsByClassName("over-box")[0]);//添加被监听的元素
    io.observe(document.getElementsByClassName("foot-box")[0]);//添加被监听的元素
    io.observe(document.getElementsByClassName("box1")[0]);//添加被监听的元素
    io.observe(document.getElementsByClassName("box2")[0]);//添加被监听的元素
    console.log(io);
    // console.log(IntersectionObserver);
  }
}
</script>
<style lang="less">
.over-box {
  // width: 100vw;
  height: 2000px;
  border: 1px solid red;
}
.foot-box {
  height: 100px;
  border: 1px solid blue;
  overflow: scroll;
  > div {
    height: 200px;
    > div {
      margin-top: 120px;
      width: 20px;
      height: 20px;
      background: skyblue;
    }
  }
}
</style>